<template>
	<view>
		<view class="scroll-view" ref="scrollView">
			<view class="scroll-content">
				<view class="top-rated-item" v-for="(item,index) in moiveBannerData" :key="index">
					<view class="poster default-img-bg">
						<u-image style="width: 170upx;height: 228rpx;" :src="item.poster">
							<view slot="error" style="font-size: 24rpx;">暂无海报</view>
						</u-image>
						<view class="wish-bg"></view>
						<view class="score">{{item.grade!=0? '评分'+item.grade : '暂无评分'}}</view>
					</view>
					<view class="u-line-1 u-font-13 u-m-b-10 u-text-center" style="width: 150rpx;">{{item.movieName}}
					</view>
					<u-button type="warning" size="mini" shape="circle" @click="toMoiveDetails(item)">{{type==1?'购票':'详情'}}</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					background: 'linear-gradient(to right, #FF6600, #FF9933)',
					width: '96%'
				}
			}
		},
		watch: {
			// 如果外部的list发生变化，判断长度是否被修改，如果前后长度不一致，重置uCurrent值，避免溢出
			type(nVal, oVal) {
				if(nVal !== oVal) {
					this.$refs.scrollView.$el.scrollLeft = 0;
				}
			}
		},
		props: {
			moiveBannerData: {
				type: Array,
				default: []
			},
			type:{
				type: [String,Number],
				default: 1
			}
		},
		methods:{
			toMoiveDetails(item){
				uni.navigateTo({
					url:'/pages/moive/moiveDetails?movieId='+item.id
				})
			}
		}
	}
</script>

<style scoped>
	.scroll-view {
		display: flex;
		flex-flow: nowrap;
		overflow-x: scroll;
	}

	.scroll-content {
		display: flex;
		flex-flow: nowrap;
		padding-right: 30rpx;
	}

	.top-rated-item {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-left: 30rpx;
	}

	.top-rated-item .poster {
		width: 170rpx;
		height: 228rpx;
		position: relative;
		margin-bottom: 12rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.top-rated-item .name {
		margin: 0;
		font-size: 26rpx;
		color: #222;
		margin-bottom: 6rpx;
	}

	.line-ellipsis {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.top-rated-item .poster img {
		height: 100%;
		width: 100%;
	}

	.top-rated-item .poster .wish-bg {
		display: inline-block;
		width: 100%;
		height: 70rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-image: -webkit-linear-gradient(top, rgba(77, 77, 77, 0), #000);
		background-image: linear-gradient(-180deg, rgba(77, 77, 77, 0), #000);
	}

	.top-rated-item .poster .score {
		position: absolute;
		left: 0;
		bottom: 4rpx;
		width: 100%;
		color: #ffffff;
		font-size: 22rpx;
		text-align: center;
	}

	>>>.u-btn--warning {
		background: linear-gradient(to right, #FF6801, #FF9832);
		width: 90%;
	}
</style>
